<template>
    <div>
        <div class="title">
            310大师推送<span>不知道url点击右边按钮</span>
        </div>
        <!-- 使用 ElementUI 的表单组件 -->
        <div class="content-box">
            <!-- 为表单添加 rules 属性绑定校验规则 -->
            <el-form ref="pushForm" class="forom-box" :model="pushForm" :rules="rules" label-width="120px">
                <!-- 标题输入框 -->
                <el-form-item label="推送标题" prop="title">
                    <el-input v-model="pushForm.title" placeholder="请输入推送标题"></el-input>
                </el-form-item>
                <!-- 内容输入框 -->
                <el-form-item label="推送内容" prop="content">
                    <el-input type="textarea" v-model="pushForm.content" placeholder="请输入推送内容"></el-input>
                </el-form-item>
                <el-form-item label="推送url" prop="url">
                    <el-input type="textarea" v-model="pushForm.url"
                        placeholder="请输入url，请认真检查参数，不知道的点击按钮，或者问前端小朱"></el-input>
                </el-form-item>
                <!-- 推送按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">推送</el-button>
                </el-form-item>
            </el-form>
            <div class="select-box">
                <el-button @click="pushForm.url = item.value" :type="item.type" v-for="item in helpList"
                    :key="item.value">
                    {{ item.label }}
                </el-button>
            </div>
        </div>
        <div class="moni-ios">
            <img src="@/assets/pushImage/mock-phone.png" alt="">
            <div class="mock-box">
                <div class="mock-box-top">
                    <img src="@/assets/310logo.png" alt="">
                    <span>
                        310大师
                    </span>
                </div>
                <div class="mock-box-bottom">
                    <span>
                        {{ pushForm.title ? pushForm.title : '通知标题' }}
                    </span>
                    <span>
                        {{ pushForm.content ? pushForm.content : '通知内容' }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import axios from 'axios';
import { getPushUserList, getPushUserListPid } from '@/api/push'
export default {
    data() {
        return {
            // 表单数据对象
            pushForm: {
                title: '这个赛事很精彩',
                content: '快来看看',
                url: '',
            
            },
            helpList: [
                {
                    label: '专家详情',
                    value: '/pages/specialist/specialistInfo?type=1&id=请填写',
                    type: 'success'
                },
                {
                    label: '方案详情',
                    value: '/pages/scheme/schemeInfo?id=请填写',
                    type: 'warning'
                },
                {
                    label: '赛事详情',
                    value: '/pages/competition/competitionInfo?match_id=请填写',
                    type: 'danger'
                }
            ],
            // 定义表单校验规则
            rules: {
                title: [
                    { required: true, message: '请输入推送标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入推送内容', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入推送 url', trigger: 'blur' }
                ]
            }
        };
    },
    mounted() {
        this.getAllUserDid()
    },
    methods: {
        chunkArray(arr, chunkSize) {
        const result = [];
        for (let i = 0; i < arr.length; i += chunkSize) {
            result.push(arr.slice(i, i + chunkSize));
        }
        return result;
    },
        async getAllUserDid() {

        },
        async onSubmit() {

            let cidArr = []

            let chunkedArray = []

            if (!this.pushForm.clientid) {

                const pres = await getPushUserListPid({
                    appname: '310',
                })

                chunkedArray = this.chunkArray(pres.data, 1000);

                







            } else {

                cidArr = this.pushForm.clientid.split(',')

                chunkedArray = []
                chunkedArray[0] = cidArr



            }






            this.$refs.pushForm.validate(async (valid) => {
                if (valid) {




                    chunkedArray.forEach(item => {


                        axios({
                            method: 'post',
                            url: 'https://fc-mp-f8b10b3a-c342-4d0d-8aae-6014150bf66f.next.bspapp.com/app_push',
                            header: {
                                'Content-Type': 'application/json'
                            },
                            data: {
                                clientid: item,
                                title: this.pushForm.title,
                                econtent: this.pushForm.content,
                                url: this.pushForm.url,
                                appname: this.pushForm.appname
                            }
                        }).then(res => {
                            let str = '';



                            res.data.forEach(item => {

                                str += `${item.name}推送${item.result.errCode == 0 ? '成功' : '失败'}           `

                            })

                            this.$message.success(str)

                            // if (res.data.data.errCode == 0) {
                            //     this.$message.success('推送成功')

                            // } else {
                            //     this.$message.error(`推送失败，原因是${res.data.data.errMsg}`)
                            // }

                        }).catch(error => {
                            this.$message.error('推送失败')

                        })

                    })








                } else {
                    // 校验失败，给出提示
                    console.log('表单校验不通过');
                    return false;
                }
            });
        }
    }}
</script>

<style scoped>
/* 原样式代码保持不变 */
.title {
    width: 100%;
    /* height: 200px; */
    padding-left: 100px;
    padding-top: 50px;
    font-size: 25px;
    margin-bottom: 50px;
}

.title span {
    font-size: 12px;
    color: red;
    margin-left: 10px;
}

.content-box {
    width: 100%;
    display: flex;
    align-items: center;

}

.forom-box {
    flex: 1;
    margin-right: 100px;
    max-width: 600px;
}

.select-box {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;

}

.select-box>button {
    margin-bottom: 20px;
    margin-left: 0px;
    width: 180px;
}

.moni-ios {
    margin-left: 100px;
    position: relative;
}

.moni-ios>img {
    width: 200px;
    height: 384px;

}

.mock-box {
    width: 150px;
    background-color: #F5DDE1;
    position: absolute;
    z-index: 1;
    top: 120px;
    left: 15px;
    /* height: 70px; */
    border-radius: 10px;

}

.mock-box-top {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 12px;
    margin-top: 10px;
}

.mock-box-bottom {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    padding-left: 10px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;

}

.mock-box-bottom span {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: none;
}

.mock-box-bottom span:nth-child(1) {
    font-weight: bold;
    margin-bottom: 1px;
}

.mock-box-top>img {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    margin: 0px 5px 0px 10px;
}

/* 可以在这里添加自定义样式 */
</style>